<!-- 物资绑定弹框 -->
<template>
  <div class="main">
    <el-dialog
      title="物资绑定信息"
      width="85%"
      :append-to-body="false"
      :modal-append-to-body="true"
      :modal="true"
      :close-on-click-modal="false"
      :lock-scroll="true"
      class="pms-dialog"
      :visible.sync="isShowDilog"
      :before-close="close"
      top="25vh"
      :destroy-on-close="true"
      :show-close="false"
    >
      <!-- 物资绑定信息表格 -->
      <div class="materia-table">
        <OrderTable
          id="id"
          ref="myTableRef"
          :is-mar-class="true"
          :table-data="materiaOptions.materiaBindTable"
          :columns="materiaOptions.colOptionMaterialBind"
          :url-data="urlData"
          @rowClick="rowClick"
          @operationBtn="operationBtn"
        />
      </div>
      <!-- 自定义按钮 -->
      <div slot="footer" class="dialog-footer">
        <el-button class="pms-button-primary" size="small" @click="confirmBind()">确定绑定结果</el-button>
        <el-button class="pms-button-primary" size="small" @click="close()">关闭</el-button>
      </div>
    </el-dialog>
    <!-- 查看编辑弹框 -->
    <CheckEditPop
      ref="mySubPop"
      :is-show-check="isShowCheck"
      :is-type="isType"
      :save-temp-row="saveTempRow"
      :url-data="urlData"
      @closeDialog="closeDialog"
    />
  </div>
</template>

<script>
import OrderTable from '../components/OrderTable.vue'
import CheckEditPop from './checkEditPop.vue'
import {
    getProductBinding,
    confirmProductBinding
} from '@/api/settlement/balanceSettlement.js'
import { colOptionMaterialBind } from '../index.js'
export default {
    name: 'MacterialPop',
    components: {
        OrderTable,
        CheckEditPop
    },
    props: {
        // 是否展示弹框
        isShowDilog: {
            type: Boolean,
            default: false
        },
        // 浏览器携带参数
        urlData: {
            type: Object,
            default: () => ({ })
        }
    },
    data() {
        return {
            // 物资绑定弹框的配置信息
            materiaOptions: {
                // 物资绑定表格信息
                materiaBindTable: [],
                // 物资绑定表头信息
                colOptionMaterialBind
            },
            isShowCheck: false, // 是否让查看或编辑弹框显示
            isType: '0', // 是编辑还是查看  0查看 1编辑
            saveTempRow: {} // 暂存一份点击查看或编辑的行
        }
    },
    watch: {
        isShowDilog: {
            handler(val) {
                if (val) {
                    this.initProductInfo()
                }
            }, deep: true, immediate: true
        }
    },
    methods: {
        // 确定绑定按钮
        async confirmBind() {
            const { prjId } = this.urlData
            const { code } = await confirmProductBinding(prjId)
            if (+code === 200) {
                this.$message({
                    message: '确认成功',
                    type: 'success'
                })
            }
        },
        // 过滤掉动态添加的id index
        filterIdList(tableData) {
            const _deepCopy = JSON.parse(JSON.stringify(tableData))
            _deepCopy.forEach((item) => {
                // 删除前端添加的属性
                delete item.id
                delete item.index
            })
            return _deepCopy
        },
        // 关闭弹窗
        close() {
            this.$emit('closeDialog', false)
        },
        // 关闭查看或编辑弹框
        closeDialog(show) {
            this.isShowCheck = show
            // 刷新最新数据
            this.initProductInfo()
        },
        // 表格行点击回调
        rowClick() {
            console.log("[]");
         },
        // 编辑/查看按钮回调
        operationBtn(data) {
            // item 是否是编辑/查看
            const [item, row] = data
            // 是否显示弹框
            this.isShowCheck = true
            // 编辑/查看
            this.isType = item
            // 把当前的行 row 传过去
            this.saveTempRow = row
            this.$refs.mySubPop.initSubMajorTable()
        },
        // 初始化获取物资绑定信息接口
        async initProductInfo() {
            const { prjId } = this.urlData
            const { code, data } = await getProductBinding(prjId)
            if (+code === 200) {
                this.materiaOptions.materiaBindTable = data
            }
        }
    }
}
</script>
<style lang="scss" scoped>
::v-deep .el-dialog .el-dialog__header {
    text-align: center;
}

::v-deep .el-table__row td:nth-child(2) .cell {
    justify-content: center;
}
::v-deep .el-table__row td:nth-child(3) .cell .header-tooltip {
    width: 180px;
    justify-content: center;
}
</style>
